<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
			<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
			<template #top>
				<!-- <public-navbar>系统通知</public-navbar> -->
				<u-navbar :isBack="false" title-color="#101010">
					<template>
						<view class="u-nav-slot flex-row-center" style="font-size: 0px; width: 750rpx; height: 44px;">
							<view @click="navItemClick(index)" class="flex-col-start navItem1"
								style="position: relative; justify-content: flex-end;" v-for="(item,index) in navArr" :key="index"
								:class="navIndex == index?'navItem1-sel':''">
								<view class="font-28">{{item}}</view>
								<view style="position: absolute;" class="redMsgCount2">
								</view>
								<view style="position: absolute;" class="redMsgCount2">
								</view>

								<view style="margin-top: 20rpx; width: 40rpx; height: 4rpx; background: rgba(0, 0, 0, 0);" :style="navIndex == index?'background: #0BB1EF;':''"></view>
							</view>
						</view>
					</template>
				</u-navbar>
			</template>

			<template #bottom>
				<!-- <view class="safe-area-inset-bottom"></view> -->
				<u-tabbar v-model="current" :list="tabbar" active-color="#0daff0"></u-tabbar>
			</template>

			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<!-- <view v-for="item in dataList" :key="item.id" class="item-notice">
				<view class="title" @click="isRead(item.id)">{{ item.content }}</view>
				<view class="u-m-t-8 secondary-text">{{formatDateTime(new Date(item.createtime*1000), 'yyyy-MM-dd') }}
				</view>
			</view> -->
			<view v-for="item in dataList" :key="index" class="flex-row-start item-notice">
				<view style="width: 96rpx; height: 96rpx; position: relative; flex-shrink: 0; font-size: 0rpx;">
					<image style="border-radius: 48rpx; width: 96rpx; height: 96rpx; background: rgb(230, 230, 230);"></image>
					<view style="width: 6rpx; height: 6rpx; border-radius: 3rpx;  position: absolute; right: -2rpx; top: 2rpx; background: red;"></view>
				</view>
				<view class="flex-col-start" style="flex: 1; justify-content:center; align-items: flex-start; margin-left: 24rpx;">
					<view class="flex-row-start" style="width: 100%; justify-content: space-between;">
						<view class="title">资料审核已通过</view>
						<view class="secondary-text">
							刚刚
						</view>
					</view>
					<view style="font-size: 28rpx; color: #999999; margin-top: 12rpx;">
						您提交的合作中介入驻资料审核已通过
					</view>
					
				</view>
				
			</view>

		</z-paging>
	</view>
</template>

<script>
	import {
		getTabbarConfig
	} from '@/common/tabbar';
	import configApi from 'utils/config.js'
	// import { userApi } from '@/common/user.js';
	export default {
		name: "NoticeList",
		data() {
			return {
				navArr:['通知','消息'],
				navIndex:0,
				current: 3,
				tabbar: getTabbarConfig(true),
				dataList: [1,2],
			};
		},
		methods: {
			navItemClick(index){
				this.navIndex = index
			},
			isRead(e) {
				let self = this;
				userApi.readNotice({
					id: e
				}).then(res => {
					// self.queryList(1,10);
					console.log(res)
					uni.navigateTo({
						url: '/pages/users/Payment?orderId=' + res + '&filter=all',
					});
				});
			},
			formatDateTime(date, format) {
				const o = {
					'M+': date.getMonth() + 1, // 月份
					'd+': date.getDate(), // 日
					'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
					'H+': date.getHours(), // 小时
					'm+': date.getMinutes(), // 分
					's+': date.getSeconds(), // 秒
					'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
					S: date.getMilliseconds(), // 毫秒
					a: date.getHours() < 12 ? '上午' : '下午', // 上午/下午
					A: date.getHours() < 12 ? 'AM' : 'PM', // AM/PM
				};
				if (/(y+)/.test(format)) {
					format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
				}
				for (let k in o) {
					if (new RegExp('(' + k + ')').test(format)) {
						format = format.replace(
							RegExp.$1,
							RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
						);
					}
				}
				return format;
			},
			queryList(pageNo, pageSize) {
				console.log(pageNo, pageSize);
				let self = this;
				console.log(pageNo, pageSize);
				let sbumData = {};
				sbumData.page = pageNo;
				
				this.$refs.paging.complete([1,2]);
				// userApi.listNotice({
				// 	page: pageNo,
				// 	class: '1'
				// }).then(res => {
				// 	// console.log(res,'22222')
				// 	this.$refs.paging.complete(res);
				// });
				// if (pageNo > 3) {
				//   this.$refs.paging.complete([]);
				//   return;
				// }

				// const itemData = {
				//   id: 1,
				//   title: "您有新的财税订单，请及时处理！",
				//   createTime: "2023-12-25 12:24:05",
				//   isRead: false,
				// };

				// const list = new Array(36).fill(itemData).map((item, index) => {
				//   return {
				//     ...item,
				//     id: (pageNo - 1) * 10 + item.id + index,
				//   };
				// });

				// this.$refs.paging.complete(list);

				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求

				// const params = {
				//   pageNo: pageNo,
				//   pageSize: pageSize,
				//   type: this.tabIndex + 1,
				// };
				// this.$request
				//   .queryList(params)
				//   .then((res) => {
				//     //将请求的结果数组传递给z-paging
				//     this.$refs.paging.complete(res.data.list);
				//   })
				//   .catch((res) => {
				//     //如果请求失败写this.$refs.paging.complete(false);
				//     //注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
				//     //在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
				//     this.$refs.paging.complete(false);
				//   });
			},
		},
	};
</script>

<style lang="scss" scoped>
	.item-notice {
		margin: 22rpx;
		padding: 28rpx;
		border-radius: 8rpx;
		background-color: #fff;

		.title {
			font-size: 28rpx;
			font-weight: bold;
		}

		.secondary-text {
			font-size: 24rpx;
			color: #666;
		}
	}
	.navItem1{
		margin-left: 20rpx;
		margin-right: 20rpx;
		font-size: 32rpx;
		color: #999999;
		font-weight: 500;
	}
	.navItem1-sel{
		font-size: 32rpx;
		color: #111111;
		font-weight: bold;
	}
	.redMsgCount2{
		width: 6rpx;
		height: 6rpx;
		background: red;
		border-radius: 3rpx;
		top: 0;
		right: 0;
	}
</style>